import React, { useState } from "react";
import "./App.css";
import STLViewer from "./libs/threejs/STLViewer";
import "antd/dist/antd.css";
import { Button } from "antd";

type TModel = string | ArrayBuffer | null;

function App() {
  // 颜色定义
  const [color, setColor] = useState("#FF0000");
  // 模板文件
  const [model, setModel] = useState<TModel>();

  /** 点击蓝色 */
  function clickBlue() {
    setColor("#0000FF");
  }

  /** 点击红色 */
  function clickRed() {
    setColor("#FF0000");
  }

  /** 选择文件 */
  function onSelectFile(props: any) {
    const { files } = props["target"];
    const reader = new FileReader();
    setModel(null);
    reader.readAsArrayBuffer(files[0]);
    reader.onload = () => {
      setModel(reader.result);
    };
  }

  return (
    <div className="App">
      <div className="select-file">
        <input id="image-file" type="file" onChange={onSelectFile} />
      </div>
      <div className="select-file">
        <span>文件下载：</span><a href='./stl_files/bottle.stl'>bottle.stl</a><a href='./stl_files/crazy-thing.stl'>crazy-thing.stl</a>
      </div>
      {model && (
        <>
          <STLViewer
            modelColor={color}
            lights={[
              [0.5, 1, -1],
              [1, 1, 1],
            ]}
            rotate={true}
            model={model}
          />
          <div className="toolbar">
            <Button type="primary" danger onClick={() => clickRed()}>红色</Button>
            <Button type="primary" onClick={() => clickBlue()}>蓝色</Button>
          </div>
        </>
      )}
    </div>
  );
}

export default App;
